<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 视图：作为vue负责管理的区域，将来可以交给vue框架管理-->
    <div id="app">
        <input type="text" v-model="msg">
        <p>您输入了：{{msg}}</p>
        <p>小狗名字：{{dog.name}}</p>
        <p>猫猫名字：{{catNames[0]}}</p>
    </div>
    <!-- 导入vue.js文件 -->
    <script src="./vue.js"></script>
    <!-- 创建vue实例 托管视图 -->
    <script>
        let vm = new Vue({
            // 托管的视图容器选择器，可以是任意选择器（id/类/元素等等），但不能是html和body
            el: '#app',
            // Model（vue中的数据都放在这），本质上是一个对象，对象里的成员都可以在视图中使用
            data: {
                msg: '成功输出！',
                dog: {
                    name: 'ruikey',
                    type: '泰迪'
                },
                catNames: [
                    '小白',
                    '小花',
                    '小红'
                ]
            }
        })
    </script>
</body>

</html>